<template>
<div class="app-container">
    <el-form label-width="120px">
        <el-form-item label="讲师名称">
            <el-input v-model="teacher.name" />
        </el-form-item>
        <el-form-item label="讲师排序">
            <el-input-number v-model="teacher.sort" controls-position="right" min="0" />
        </el-form-item>
        <el-form-item label="讲师头衔">
            <el-select v-model="teacher.level" clearable placeholder="请选择">
                <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
                <el-option :value="1" label="高级讲师" />
                <el-option :value="2" label="首席讲师" />
            </el-select>
        </el-form-item>
        <el-form-item label="讲师资历">
            <el-input v-model="teacher.career" />
        </el-form-item>
        <el-form-item label="讲师简介">
            <el-input v-model="teacher.intro" :rows="10" type="textarea" />
        </el-form-item>

        <!-- 讲师头像：TODO -->
        <el-form-item label="讲师头像">
            <!-- 头衔缩略图 -->
            <pan-thumb :image="teacher.avatar" />
            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>

            <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调-->
            <image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey" :url="BASE_API+'/eduoss/fileoss/upload'" field="file" @close="close" @crop-upload-success="cropSuccess" />
        </el-form-item>
        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import teacherApi from "@/api/edu/teacher"
//导入上传头像的组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
    //引入上传的组件
    components: {
        ImageCropper,
        PanThumb
    },
    data() {
        return {
            teacher: {
                name: "",
                sort: 0,
                level: 1,
                career: "",
                intro: "",
                avatar: "",
            },
            imagecropperKey: 0, //上传组件key的值
            imagecropperShow: false, //控制更换头像的弹框
            saveBtnDisabled: false,
            BASE_API: process.env.BASE_API //获取dev.env.js中的base_api的地址
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //根据路由变化方式 路由发生变化  方法就会执行

            this.init();
        },
    },
    methods: {
        close() { //关闭上传头像弹窗
            this.imagecropperShow = false
            //上传组件初始化为了解决更换头像的bug 需要点击两次才能上传头像  第一次显示的是上传成功
            this.imagecropperKey = this.imagecropperKey + 1
        },
        cropSuccess(data) { //这里的参数data相当于response.data 内部做了封装
            //该方法是点击保存
            this.imagecropperShow = false
            //this.avatar=data.url 反面教材 注意avatar是teacher下的属性
            this.teacher.avatar = data.url
            console.log(data.url)
            //每次上传成功 让上传组件的key值初始化
            this.imagecropperKey = this.imagecropperKey + 1
        },
        init() {
            //根据url中的参数的值判断是新增还是修改
            //判断路径有id值就做修改
            if (this.$route.params && this.$route.params.id) {
                //从路径中获取id
                const id = this.$route.params.id;

                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径上没有id
                this.teacher = {};
            }
        },
        //回显数据 在页面渲染前调用的方法
        getInfo(id) {
            teacherApi.getTeacherById(id).then((response) => {
                this.teacher = response.data.teacher;
            });
        },
        saveOrUpdate() {
            //该方法内部是包含了添加和更新两个方法
            if (this.teacher.id == null) {
                //if(!this.teacher.id)
                this.saveTeacher();
            } else {
                this.updateTeacher();
            }
        },
        updateTeacher() {
            teacherApi.updateTeacherInfo(this.teacher).then((response) => {
                this.$message({
                    type: "success",
                    message: "修改成功!",
                });
            });
            this.$router.push({
                path: "/teacher/table"
            });
        },
        saveTeacher() {
            teacherApi.addTeacher(this.teacher).then((response) => {
                this.$message({
                    type: "success",
                    message: "添加成功!",
                });
            });
            //路由跳转到讲师列表页面
            this.$router.push({
                path: "/teacher/table"
            });
        },
    },
};
</script>
